<template>
  <div class="sum">
    <div class="panle">
      <div class="title">高铁票务综合管理系统</div>
      <el-form :model="form" label-width="80px">
        <el-form-item label="用户名" class="input1">
          <el-input v-model="form.nickname"></el-input>
        </el-form-item>
        <el-form-item label="电话" class="input1">
          <el-input v-model="form.phone"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" class="input1">
          <el-input v-model="form.email"></el-input>
        </el-form-item>
        <el-form-item label="账号" class="input1">
          <el-input v-model="form.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" class="input2">
          <el-input v-model="form.password" show-password></el-input>
          <div class="goRegister"><a href="/#/login">已注册,去登录</a></div>
        </el-form-item>
        <el-button @click="btn" class="login">注册</el-button>
      </el-form>
    </div>
  </div>
</template>

<script setup>
import { ElMessage } from "element-plus";
import axios from "axios";
import { getRegisterApi } from "@/api/user.js";
import { useRouter } from "vue-router";
import { ref, reactive } from "vue";
const form = reactive({
  nickname: "",
  password: "",
  username: "",
  phone: "",
  email: "",
});
const router = useRouter();
const btn = async () => {
  try {
    console.log(form);
    const params = {
      nickname: form.nickname,
      username: form.username,
      password: form.password,
      phone: form.phone,
      email: form.email,
    };
    const res = await getRegisterApi(params);
    console.log("注册拿到的返回数据", res);
    if (res.message === "success") {
      ElMessage({
        message: "注册成功！",
        type: "success",
      });
      // 跳转页面
      router.push("/login");
    } else {
      ElMessage({
        message: "注册失败！请重试",
        type: "error",
      });
    }
  } catch (error) {
    console.log(error);
  }
};
</script>

<style lang="scss" scoped>
html,
body {
  padding: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.sum {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 750px;
  overflow: hidden;
  background: linear-gradient(to right bottom, #ffffff, #858585);
}
.panle {
  width: 400px;
  height: 420px;
  background: white;
  border-radius: 10px;
  padding: 25px;
}
.title {
  width: 100%;
  height: 60px;
  color: #858585;
  font-weight: 600;
  text-align: center;
  line-height: 60px;
  margin-bottom: 30px;
  font-size: 20px;
}
.login {
  width: 50%;
  color: #858585;
  margin-left: 25%;
}
.input1 {
  width: 360px;
}
.input2 {
  width: 360px;
}
.goRegister {
  width: 120px;
  margin-left: 190px;

  a {
    text-decoration: none;
    color: #858585;
  }
}
</style>
